<!-- 我的消息详情 -->
<template>
  <a-modal
    :width="400"
    :visible="visible"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <template #title>
      <div style="font-size: 18px;text-align: center">{{form.messageTitle}}</div>
    </template>
    <a-form
      ref="form"
      :disabled="true"
      :model="form"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
<!--      <a-form-item label="通知标题">-->
<!--        <a-input placeholder="请输入通知标题" :disabled="true" v-model:value="form.messageTitle" />-->
<!--        <div v-html="form.messageTitle"></div>-->
<!--      </a-form-item>-->

<!--      <a-form-item label="消息内容">-->
<!--        <tinymce v-model="form.messageContent" :disabled='true'></tinymce>-->
        <!-- 假设你的富文本内容存储在变量richTextContent中 -->
        <div v-html="form.messageContent" style="margin-top: 5px;font-size: 16px"></div>
<!--      </a-form-item>-->
    </a-form>
    <template #footer>
      <div style="text-align: right">
        <a-button :type="'primary'" @click="updateVisible(false)" style="margin-left: 20px">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { NoticeApi } from '@/api/NoticeApi';
import { EventBus } from '@/event/eventBus';

export default {
  name: 'MynoticeDetail',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 上级组件传来的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: Object.assign(
        {
          noticeTitle: '',
          noticeContent: ''
        },
        this.data
      )
    };
  },
  watch: {
    async visible() {
      if (this.data) {
        let messageId = this.data.messageId;
        let result = await NoticeApi.messageDetail({ messageId });
        this.form = Object.assign({}, result);
        EventBus.emit('read-message', '已读一条消息');
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  methods: {
    /**
     * 点击确定
     *
     * @author fengshuonan
     * @date 2021/6/14 20:24
     */
    async save() {
      this.updateVisible(false);
    },

    /**
     * 更新编辑界面弹框是否显示
     *
     * @author fengshuonan
     * @date 2021/6/14 20:24
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
      this.$emit('done');
    }
  }
};
</script>

<style scoped></style>
